<template>
    <div class="outter">
        <div>
            <el-select v-model="choice" placeholder="请选择" style="width:150px">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="searchFor" placeholder="请输入内容" style="width:300px;"></el-input>
            <el-button type="info" @click="searching">查询</el-button>
        </div>
        <el-table
        :data="newInfo.goods"
        height="100%"
        border
        style="width: 100%">
            <el-table-column prop="name" label="姓名" width="200px"></el-table-column>
            <el-table-column prop="phone" label="电话" width="200px"></el-table-column>
            <el-table-column prop="address" label="地址" width="auto"></el-table-column>
            <el-table-column prop="userId" label="用户ID" width="200px"></el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="danger" @click="modifyAdress(scope.$index, scope.row)">修改地址</el-button> -->
                    <el-button size="mini" type="danger" @click="modifyAdress(scope.$index, scope.row)">修改地址</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="~~newInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="newInfo.totalPage">
            </el-pagination>
        </div>
        <div>
            <el-dialog title="修改中..." :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="收货地址" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmUpdate">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers("receivedAdress");
export default {
    mounted(){
        this.getAdressAsync();
    },
    data() {
        return {
            // 删选选项
            options: [{
                value: 'name',
                label: '姓名'
            }, {
                value: 'phone',
                label: '电话'
            }, {
                value: 'adress',
                label: '地址'
            }, {
                value: 'id',
                label: '用户ID'
            }],
            choice: '',
            searchFor: '',
            currentPage4: 1,
            dialogTableVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            form: {
                name: "",
            },
            mofifyId: "",
        }
    },
    watch: {
        changed(newName, oldName){
            console.log(newName);
            console.log(oldName);
            if(newName){
                this.getAdressAsync();
            }
        }
    },
    computed:{
        ...mapGetters(["newInfo"]),
        ...mapState(["pageData", "changed"]),
    },
    methods: {
        ...mapActions(["getAdressAsync", "modifyAddressAsync"]),
        ...mapMutations(["searchAdress"]),
        // 查询列表
        searching(){
            this.searchAdress({choice: this.choice, searchFor: this.searchFor});
        },
        // 换页
        handleSizeChange(val) {
            console.log(val)
            // console.log(`每页 ${this.pageData.pageSize} 条`);
            this.newInfo.pageSize = val;
            this.getAdressAsync();
        },
        handleCurrentChange(val) {
            console.log(val)
            this.newInfo.currentPage = val;
            // console.log(`当前页: ${this.pageData.currentPage}`);
            this.getAdressAsync();
        },
        // 修改地址获取参数
        modifyAdress(index, items) {
            this.dialogFormVisible = true;
            this.form.name = items.address;
            this.mofifyId = items._id;
        },
        confirmUpdate(index, items){
            this.dialogFormVisible = false;
            // console.log(this.mofifyId);
            // console.log(this.form.name);
            this.modifyAddressAsync({_id: this.mofifyId, address: this.form.name});
        }
    }
}
</script>

<style>
.outter{
    width: 100%;
    height: 80%;
}
</style>